<template>
	<view class="from_box">
		<u-form :model="form" ref="uForm">
			<u-form-item label-width="150rpx" label="标题活动" prop="title" class="rules_item">
				<view class="rules_tip">*</view>
				<u-input v-model="form.title" placeholder="请输入标题活动" />
			</u-form-item>
			<u-form-item label-width="150rpx" label="面相班级" prop="checked" class="rules_item">
				<view class="rules_tip rules_check">*</view>
				<u-checkbox-group>
					<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in checkboxList"
						:key="index" :name="item.name">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item label-width="150rpx" label="活动类型"><u-input v-model="form.type" type="select" class="rules_item"
					@click="showSex = true" placeholder="请选择活动类型" /></u-form-item>
			<u-form-item label-width="150rpx" label="活动地点" prop="address" class="rules_item">
				<view class="rules_tip">*</view><u-input v-model="form.address" placeholder="请输入活动结束时间" />
			</u-form-item>
			<u-form-item label-width="200rpx" :label-position="labelPosition" label="活动开始时间" prop="time"
				class="rules_item">
				<view class="rules_tip">*</view><u-input :border="border" placeholder="请选择活动开始时间"
					v-model="form.birthdate" type="select" :select-open="pickerTime1"
					@click="pickerTime1 = true"></u-input>
			</u-form-item>
			<u-form-item label-width="200rpx" :label-position="labelPosition" label="活动结束时间" prop="time"
				class="rules_item">
				<view class="rules_tip">*</view><u-input :border="border" placeholder="请选择活动结束时间" v-model="form.enddate"
					type="select" :select-open="pickerTime2" @click="pickerTime2 = true"></u-input>
			</u-form-item>
			<u-form-item label-width="200rpx" :label-position="labelPosition" label="截止报名时间" prop="time"
				class="rules_item">
				<view class="rules_tip">*</view><u-input :border="border" placeholder="请选择截止报名时间"
					v-model="form.stopdate" type="select" :select-open="pickerTime3"
					@click="pickerTime3 = true"></u-input>
			</u-form-item>
			<u-form-item label-width="150rpx" label="活动内容"  class="rules_item">
				<view class="rules_tip">*</view><u-input v-model="form.remark" placeholder="请输入活动内容" type="textarea" />
			</u-form-item>
		</u-form>
		<u-button class="from_sub" @click="handleSubmit">发 布</u-button>
		<u-picker mode="time" v-model="pickerTime1" @confirm="(e)=>timeConfirm(e,'start')" :params="params"></u-picker>
		<u-picker mode="time" v-model="pickerTime2" @confirm="(e)=>timeConfirm(e,'end')" :params="params"></u-picker>
		<u-picker mode="time" v-model="pickerTime3" @confirm="(e)=>timeConfirm(e,'stop')" :params="params"></u-picker>
		<u-action-sheet :tips="tips" :list="selectlist" v-model="showSex" @click="actionSheetCallback"></u-action-sheet>
		<!-- 提示 -->
		<u-toast ref="uToast" />
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				pickerTime1: false, //控制日期显示
				pickerTime2: false, //控制日期显示
				pickerTime3: false, //控制日期显示
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					timestamp: true,
				},
				tips: {

					text: '请选择性别',

					color: '#909399',

					fontSize: 24

				},
				showSex: false,
				selectlist: [{
						text: '男'
					},
					{
						text: '女'
					}
				],
				form: {
					title: '',
					address: '',
					intro: '',
					type: '',
					birthdate: '',
					birthdateOriginal: '',
					enddate: '',
					enddateOriginal: '',
					stopdate: '',
					stopdateOriginal: '',
					remark:''
				},

				checkboxList: [{
						name: '全选',
						checked: false,
						disabled: false
					},
					{
						name: '超级一班',
						checked: true,
						disabled: false
					},
					{
						name: '超级二班',
						checked: false,
						disabled: false
					},
					{
						name: '超级三班',
						checked: false,
						disabled: false
					},
					{
						name: '超级四班',
						checked: false,
						disabled: false
					},
					{
						name: '超级五班',
						checked: false,
						disabled: false
					},
					{
						name: '超级六班',
						checked: false,
						disabled: false
					},
					{
						name: '超级四班',
						checked: false,
						disabled: false
					},
					{
						name: '超级五班',
						checked: false,
						disabled: false
					},
					{
						name: '超级超级六班',
						checked: false,
						disabled: false
					},
					{
						name: '超级超级四班',
						checked: false,
						disabled: false
					},
					{
						name: '五班',
						checked: false,
						disabled: false
					},
					{
						name: '六班',
						checked: false,
						disabled: false
					}
				],

			}
		},

		methods: {

			// 发布提交
			handleSubmit() {
				const hasChecked = this.checkboxList.some(item => item.checked);
				if (this.form.title === '') {
					this.$refs.uTips.show({
						title: '请输入活动标题！',
						type: 'warning',
						duration: '2000'
					})
					return false;
				}
				if (!hasChecked) {
					this.$refs.uTips.show({
						title: '请选择面相班级！',
						type: 'warning',
						duration: '2000'
					}) 
					return false;
				}
				if (this.form.address === '') {
					this.$refs.uTips.show({
						title: '请输入活动地点！',
						type: 'warning',
						duration: '2000'
					}) 
					return false;
				}
				if (this.form.birthdate === '') {
					this.$refs.uTips.show({
						title: '请选择活动开始时间！',
						type: 'warning',
						duration: '2000'
					}) 
					return false;
				}
				if (this.form.enddate === '') {
					this.$refs.uTips.show({
						title: '请选择活动结束时间！',
						type: 'warning',
						duration: '2000'
					}) 
					return false;
				}
				if (this.form.stopdate === '') {
					this.$refs.uTips.show({
						title: '请选择截止报名时间！',
						type: 'warning',
						duration: '2000'
					}) 
					return false;
				}
				if (this.form.remark === '') {
					this.$refs.uTips.show({
						title: '请输入活动内容！',
						type: 'warning',
						duration: '2000'
					}) 
					return false;
				}
				
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e);
				let flag = e.value
				if (e.name === '全选') {
					this.checkboxList.forEach(item => {
						item.checked = flag
					})
				}
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.form.type = this.selectlist[index].text;
			},
			timeConfirm(e, type) {
				console.log(e);
				if (type === 'start') {
					let timestamp1 = parseInt(Date.parse(new Date()) / 1000 / 60);
					this.form.birthdateOriginal = parseInt(e.timestamp / 1000 / 60)
					console.log(timestamp1, this.form.birthdateOriginal, 'this.form.birthdateOriginal');
					if (this.form.birthdateOriginal < timestamp1) {
						this.$refs.uToast.show({
							title: '活动开始时间不能小于当前时间！',
							type: 'warning',
						})
						return false;
					}
					if (this.form.birthdateOriginal > this.form.enddateOriginal && this.form.enddateOriginal != '') {
						this.$refs.uToast.show({
							title: '活动开始时间不能大于结束时间！',
							type: 'warning',
						})
						return false;
					}
					this.form.birthdate = e.year + '年' + e.month + '月' + e.day + '日' + ' ' + e.hour + '时' + e
						.minute + '分';
				}
				if (type === 'end') {
					this.form.enddateOriginal = parseInt(e.timestamp / 1000 / 60)
					console.log(this.form.birthdateOriginal, this.form.enddateOriginal);
					if (this.form.birthdateOriginal > this.form.enddateOriginal) {
						this.$refs.uToast.show({
							title: '结束时间不能小于开始时间！',
							type: 'warning',
						})
						return false;
					}
					this.form.enddate = e.year + '年' + e.month + '月' + e.day + '日' + ' ' + e.hour + '时' + e.minute +
						'分';
				}
				if (type === 'stop') {
					this.form.stopdateOriginal = parseInt(e.timestamp / 1000 / 60)
					if (this.form.stopdateOriginal > this.form.birthdateOriginal) {
						this.$refs.uToast.show({
							title: '截止报名时间需要大于活动开始时间！',
							type: 'warning',
						})
						return false;
					}
					this.form.stopdate = e.year + '年' + e.month + '月' + e.day + '日' + ' ' + e.hour + '时' + e.minute +
						'分';
				}
			},

		}

	}
</script>

<style lang="scss" scoped>
	.from_box {
		padding: 20rpx 40rpx;
	}

	.from_sub {
		margin-top: 30rpx;
	}

	::v-deep .u-form-item--right__content__slot {
		position: relative !important;
	}

	.rules_item {
		position: relative;

		.rules_check {
			top: 43% !important;
		}

		.rules_tip {
			position: absolute;
			color: red;
			left: -34rpx;
			top: 0rpx;
		}
	}
</style>